<template>
	<view>
		<Navbar></Navbar>
		<view class="u-m-20">
			<view class="u-relative">
				<u-image width="100%" :src="image" mode="widthFix"></u-image>
				<view class="price">
					<view class="u-flex u-col-bottom">
						<view class="u-font-bold">
							<span class="u-font-34">{{ priceData.value }}元/{{priceData.title}}</span>
							<!-- <span class="u-font-24 u-m-l-3"></span> -->
						</view>
						
					</view>
					<view class="u-font-line u-font-24 u-m-l-5">原价：{{ priceData.line_price }}元/{{priceData.title}}</view>
				</view>
				<view class="left_btn" @click="onSwitchForm(1)"></view>
				<view class="right_btn" @click="onSwitchForm(2)"></view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		<!-- <view class="bottom_box">
			<view class="u-flex u-row-between u-width-100">
				<view class="u-p-l-30 u-m-r-50 u-text-center" @click="onBack">
					<u-icon name="fanhui1" custom-prefix="custom-icon" size="40" color="#7E7E7E"></u-icon>
					<view class="u-color-gray">返回</view>
				</view>
				<view class="left-btn" @click="onSwitchForm(1)">普通版</view>
				<view class="right-btn" @click="onSwitchForm(2)">高级展厅</view>
			</view>
		</view> -->

		<!-- 提示框 -->
		<Modal :show="modal.show" :confirmText="modal.confirm" :cancelText="modal.cancel" :modalContent="modal.content"
			:showCancel="modal.showCancel" :showConfirm="modal.showConfirm" @confirm="modalConfirm"
			@cancel="modal.show = false"></Modal>
	</view>
</template>

<script>
	import {
		userExhibitionMenu,
		generateOrderSn,
		createOrder,
		userExhibitionStatus,
		getConfigInfo
	} from '@/network/api.js'
	import Navbar from '@/components/Navbar'
	import Modal from '@/components/Modal.vue'
	export default {
		components: {
			Navbar,
			Modal
		},
		data() {
			return {
				priceData: {},
				modal: {
					show: false,
					showCancel: true,
					showConfirm: true,
					confirm: '确定',
					cancel: '取消',
					content: ''
				},
				image: '',
				exhibitionStatus: 0 // 用户展厅状态
			}
		},
		onLoad() {
			this.onGetMenu()
			this.onGetImage()
		},
		methods: {
			async onGetMenu() {
				const res = await userExhibitionMenu({
					key: 5
				})
				res.data.list.line_price = parseInt(res.data.list.line_price)
				res.data.list.age_price = parseInt(res.data.list.age_price)
				this.priceData = res.data.list
			},
			async onGetImage() {
				const res = await getConfigInfo({
					key: 'exhibition_advert'
				})
				this.image = res.data.value
			},
			onBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			async onSwitchForm(val) {
				switch (val) {
					case 1:
						uni.navigateTo({
							url: "/operate/seniorForm/seniorForm?type=" + val
						})
						break;
					case 2:
						const orderSnRes = await generateOrderSn()

						const params = {
							type: "exhibition",
							order_sn: orderSnRes.data.order_sn,
							userid: uni.getStorageSync("user_id"),
							key: this.priceData.key,
							price: this.priceData.value
						}
						const _this = this
						const creRes = await createOrder(params)
						await uni.requestPayment({
							provider: "wxpay",
							appId: creRes.data.order_str.appId,
							timeStamp: creRes.data.order_str.timeStamp,
							nonceStr: creRes.data.order_str.nonceStr,
							package: creRes.data.order_str.package,
							signType: creRes.data.order_str.signType,
							paySign: creRes.data.order_str.paySign,
							success() {
								uni.hideLoading()
								userExhibitionStatus({
									userid: uni.getStorageSync("user_id")
								}).then(res => {
									_this.exhibitionStatus = Number(res.data.status)
									switch (Number(res.data.status)) {
										case -1:
											_this.modal.content = "你的展厅审核未被通过，请重新提交"
											_this.modal.confirm = "重新申请"
											_this.modal.show = true
											break;
										case 0:
										case 2:
											_this.modal.content = "你的展厅正在审核中，请等待审核通过后，填写高级展厅内容"
											_this.modal.confirm = "确定"
											_this.modal.show = true
											break;
										case 1:
											uni.navigateTo({
												url: "/operate/seniorForm/seniorForm?type=2"
											})
											break;
									}
								})
							},
							fail(err) {
								uni.hideLoading()
								uni.showLoading({
									title: err,
								})
							},
							complete() {
								uni.hideLoading()
							}
						})
						break;
				}
			},
			modalConfirm() {
				switch (this.exhibitionStatus) {
					case -1:
						uni.navigateTo({
							url: "/operate/seniorForm/seniorForm?type=2"
						})
						break;
					case 0:
					case 2:
						uni.navigateBack({
							delta: 1
						})
						break;
				}
				this.modal.show = false
			},
		}
	}
</script>

<style scoped>
	.price {
		color: #fff;
		position: absolute;
		bottom: 48rpx;
		left: 485rpx;
	}

	.left-btn {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		height: 80rpx;
		background: #F0F3F8;
		color: #31396A;
		border-radius: 50rpx;
		margin: 0 10rpx;
	}

	.right-btn {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		height: 80rpx;
		background: #FB630E;
		color: #fff;
		border-radius: 50rpx;
		margin: 0 10rpx;
	}

	.left_btn {
		position: absolute;
		height: 100%;
		width: 42%;
		top: 0;
	}

	.right_btn {
		position: absolute;
		height: 100%;
		width: 60%;
		top: 0;
		left: 42%;
	}
</style>